<template>
  <div class="visual-container">
    <!-- 头部 -->
    <header>
      <h1>进出港航班信息</h1>
      <div class="clock">
        <Clock></Clock>
      </div>
    </header>
    <!-- 页面主体部分 -->
    <div class="main">
      <div class="entry_flights_box">
        <span class="main_title">入港航班详情</span>
        <Scheduled_entry_flights></Scheduled_entry_flights>
      </div>
      <div class="departure_flights_box">
        <span class="main_title">出港航班详情</span>
        <Scheduled_departure_flights></Scheduled_departure_flights>
      </div>
    </div>
  </div>

</template>


<script>
  import Scheduled_entry_flights from '../components/flights_monitor/Scheduled_entry_flights'
  import Scheduled_departure_flights from '../components/flights_monitor/Scheduled_departure_flights'
  import Clock from '../components/flights_monitor/Clock'

  export default {
    name: 'flights_scheduled_info',
    methods: {
      logout () {
        window.sessionStorage.clear()
        this.$router.push('/login')
        this.$message({
          showClose: true,
          message: '退出成功',
          type: 'success'
        })
      }
    },
    components: {
      Scheduled_departure_flights: Scheduled_departure_flights,
      Scheduled_entry_flights: Scheduled_entry_flights,
      Clock: Clock
    }
  }
</script>

<style lang="less" scoped>
  .main {
    width: 100%;
    height: 1000px;
    text-align: center;
    bottom: 0;
    .entry_flights_box {
      width: 100%;
      height: 50%;

    }
    .departure_flights_box {
      width: 100%;
      height: 50%;

    }
    .main_title {
      height: 50px;
      text-align: center;
      font-size: 40px;
      color: #E6A23C;
      padding-bottom: 10px;
    }
  }



</style>
